<template>
	<dv-border-box-7 id="scroll-board">
		<dv-scroll-board :config="config1"/>
		<el-dialog title="报警信息" :visible.sync="open" append-to-body id="dialog1">
			<dv-scroll-board :config="config"/>
		</el-dialog>
	</dv-border-box-7>
</template>

<script>
	import Axios from 'axios'
	export default {

		name: 'ScrollBoard',
		data() {
			return {
				config: {
					header: ['时间', '设备名', '报警名称'],
					data: [],
					index: true,
					align: ['center'],
					columnWidth: [fontSize(10),fontSize(25),fontSize(20)],
					rowNum: 8,
					headerBGC: '#1981f6',
					headerHeight: fontSize(5),
					oddRowBGC: 'rgba(0, 44, 81, 0.8)',
					evenRowBGC: 'rgba(10, 29, 50, 0.8)'
				},
				config1:{
					header: ['时间', '数据', '结果'],
					data:[['2022-03-04 ','data','result',],['','',''],['','',''],['','',''],['','',''],['','',''],['','',''],['','',''],['','','']
          ] ,
					index: true,
					align: ['center'],
					columnWidth: [fontSize(10),fontSize(30),fontSize(25)],
					rowNum: 8,
					headerBGC: '#1981f6',
					headerHeight: fontSize(5),
					oddRowBGC: 'rgba(0, 44, 81, 0.8)',
					evenRowBGC: 'rgba(10, 29, 50, 0.8)',
					waitTime: 5000
				},
				open:false
			}
		},
		methods: {
			UpdateData() {
				const {
					randomExtend
				} = this;

				Axios.get('http://127.0.0.1:5000/api/TWoring/GetDianc').then(
					response => (
						this.config1 = {
							header: ['时间', '数据', '结果'],
							data: response.data,
							index: true,
							align: ['center'],
							columnWidth: [fontSize(10),fontSize(30),fontSize(25)],
							rowNum: 8,
							headerBGC: '#1981f6',
							headerHeight: fontSize(5),
							oddRowBGC: 'rgba(0, 44, 81, 0.8)',
							evenRowBGC: 'rgba(10, 29, 50, 0.8)',
							waitTime: 5000
						}
					)
				);
				Axios.get('http://127.0.0.1:5000/api/TWoring/GetWoring').then(
					response => (
						this.config = {
							header: ['时间', '设备名', '报警名称'],
							data: response.data,
							index: true,
							align: ['center'],
							columnWidth: [fontSize(10),fontSize(35),fontSize(17)],
							rowNum: 8,
							headerBGC: '#1981f6',
							headerHeight: fontSize(5),
							oddRowBGC: 'rgba(0, 44, 81, 0.8)',
							evenRowBGC: 'rgba(10, 29, 50, 0.8)',
						}
					)
				);

				if(this.config.data == "")
				{
					this.open = false;
				}
				else
				{
					this.open = true;
				}

			}
		},
		mounted () {
		  const { UpdateData } = this

		  this.UpdateData()

		  setInterval(this.UpdateData, 1000)
		}
	}

	export function fontSize(res) {
	  let docEl = document.documentElement,
	    clientWidth =
	      window.innerWidth ||
	      document.documentElement.clientWidth ||
	      document.body.clientWidth;
	  if (!clientWidth) return;
	  let fontSize = 100 * (clientWidth / 23329);
	  return res * fontSize;
	}
</script>
<style lang="less">
	#scroll-board {
		width: 50%;
    height: 100%;
		box-sizing: border-box;
		overflow: hidden;
    background-color: rgba(6, 30, 93, 0.5);
    margin-right:10px;

	}
</style>
<style>
	#dialog1 div.el-dialog__header{
		padding: 5px 10px 1px;
		background-color: rgba(6,30,93,0.5);
		padding: 5px 10px;
	}
	#dialog1 div.el-dialog__body{
		background-color:rgba(6,30,93,0.5);
	}
	#dialog1 div.el-dialog{
		background-color:rgba(2,4,37,0);
	}
	#dialog1 span.el-dialog__title{
		color: white;
	}
</style>
